<template>
  <!-- 个人月统计 -->
  <view class="container">
    <view class="header-container">
      <view class="date-range">{{ dateRange }}</view>
      <view class="back-current" @click="backToCurrentMonth">回到本月</view>
    </view>

    <view class="month-container" @touchstart="handleTouchStart" @touchmove.prevent @touchend="handleTouchEnd">
      <view v-for="(item, index) in displayedMonths" :key="index" class="month-item"
        :style="getMonthStyle(item.year, item.month)" @click="selectMonth(item.year, item.month)">
        {{ item.month }}月
      </view>
    </view>

    <view class="stats-grid">
      <view v-for="(item, index) in list" :key="index" class="stat-item" @click="ClickViewdetails">
        <text class="stat-value">{{ item.age }}</text>
        <text class="stat-label">{{ item.name }}</text>
      </view>

      <view class="stats-footer">
        统计截止 2025-05-13 08:45
      </view>
    </view>
    <view class="view-detail" @click="ClickViewdetails">查看详情</view>
  </view>
</template>

<script>
export default {
  name: "Monthlystatistics",
  data () {
    return {
      currentYear: new Date().getFullYear(),
      currentStartMonth: 1,
      selectedYear: null,
      selectedMonth: null,
      touchStartX: 0,
      list: [
        { name: '平均工时', age: 0 },
        { name: '出勤天数', age: 0 },
        { name: '出勤班次', age: 0 },
        { name: '休息天数', age: 0 },
        { name: '迟到', age: 0 },
        { name: '早退', age: 0 },
        { name: '缺卡', age: 0 },
        { name: '旷工', age: 0 },
        { name: '外勤', age: 0 },
        { name: '年假', age: 0 },
        { name: '加班', age: 0 },
        { name: '补卡申请', age: 0 },
      ],
    }
  },
  computed: {
    displayedMonths () {
      return Array.from({ length: 6 }, (_, i) => {
        const month = this.currentStartMonth + i
        const year = month > 12 ? this.currentYear + 1 : this.currentYear
        return { year: month > 12 ? year : this.currentYear, month: month > 12 ? month - 12 : month }
      })
    },
    dateRange () {
      return `${this.selectedYear} | ${this.selectedMonth}月`
    }
  },
  created () {
    // console.log('个人月统计');

    this.backToCurrentMonth()
  },
  methods: {
    ClickViewdetails () {
      uni.navigateTo({
        url: `/components/AttcemanntComponent/Personalweeklystatistics/index?selectedYear=${this.selectedYear}&selectedMonth=${this.selectedMonth}&title=个人月统计`
      });
    },
    handleTouchStart (e) {
      this.touchStartX = e.touches[0].clientX
    },
    handleTouchEnd (e) {
      const touchEndX = e.changedTouches[0].clientX
      const diffX = touchEndX - this.touchStartX
      const threshold = 50 // 滑动阈值

      if (Math.abs(diffX) > threshold) {
        diffX > 0 ? this.handleSwipeLeft() : this.handleSwipeRight()
      }
    },
    handleSwipeRight () {
      let newStart = this.currentStartMonth + 6
      let newYear = this.currentYear
      if (newStart > 12) {
        newYear += 1
        newStart -= 12
      }
      this.currentYear = newYear
      this.currentStartMonth = newStart
      this.selectedYear = newYear
      this.selectedMonth = newStart
    },
    handleSwipeLeft () {
      let newStart = this.currentStartMonth - 6
      let newYear = this.currentYear
      if (newStart < 1) {
        newYear -= 1
        newStart += 12
      }
      this.currentYear = newYear
      this.currentStartMonth = newStart
      this.selectedYear = newYear
      this.selectedMonth = newStart
    },
    // 新增方法：获取月份样式
    getMonthStyle (year, month) {
      const currentDate = new Date()
      const isCurrent = year === currentDate.getFullYear() && month === currentDate.getMonth() + 1
      const isSelected = year === this.selectedYear && month === this.selectedMonth

      return {
        color: isSelected ? '#1890ff' : (isCurrent ? '#007aff' : '#000'),
        fontWeight: isSelected ? 'bold' : 'normal',
        transition: 'all 0.3s'
      }
    },
    backToCurrentMonth () {
      const current = new Date()
      this.currentYear = current.getFullYear()
      this.currentStartMonth = current.getMonth() + 1 <= 6 ? 1 : 7
      this.selectedYear = current.getFullYear()
      this.selectedMonth = current.getMonth() + 1
    },
    selectMonth (year, month) {
      // console.log('year', year); // 年
      // console.log('month', month); // 月
      this.currentYear = year
      this.selectedYear = year
      this.selectedMonth = month
    },
  },

}
</script>
<style lang="scss" scoped>
.container {
  margin-top: 10px;
}

.header-container {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  .date-range {
    width: 50%;
  }

  .back-current {
    color: #909399;
    width: 50%;
    text-align: right;
    font-size: 14px;
  }
}

.month-container {
  margin-top: 10px;
  height: 60px;
  display: flex;
  line-height: 60px;
  border-bottom: 1px solid #eee;

  .month-item {
    width: 16.66%;
    text-align: center;
    transition: all 0.3s;
  }
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  position: relative;

  .stat-item {
    width: 33.33%;
    height: 90px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;

    .stat-value {
      margin-bottom: 10px;
      font-size: 20px;
    }

    .stat-label {
      font-size: 14px;
      text-align: center;
    }
  }

  .stats-footer {
    width: 100%;
    text-align: left;
    padding: 5rpx 0rpx 10rpx 9rpx;
    color: #999;
    font-size: 0.75rem;
    margin-top: 0.625rem;
  }
}

.view-detail {
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
  text-align: center;
}
</style>
